{% extends 'dns_manager/base.html' %}

{% block title %}域名管理 - DNS管理系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1">
            <i class="bi bi-globe text-success me-2"></i>域名管理
        </h2>
        <p class="text-muted mb-0">管理您的域名和DNS解析记录</p>
    </div>
    <a href="{% url 'create_domain' %}" class="btn btn-success">
        <i class="bi bi-plus me-1"></i>添加域名
    </a>
</div>

{% if domains.object_list %}
<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="border-0 ps-4">域名</th>
                        <th class="border-0">云账号</th>
                        <th class="border-0">记录数</th>
                        <th class="border-0">最后同步</th>
                        <th class="border-0">状态</th>
                        <th class="border-0 text-center">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for domain in domains %}
                    <tr>
                        <td class="ps-4">
                            <div class="d-flex align-items-center">
                                <div class="domain-icon bg-primary bg-gradient text-white rounded-circle me-3">
                                    <i class="bi bi-globe"></i>
                                </div>
                                <div>
                                    <div class="fw-semibold">
                                        <a href="{% url 'domain_records' domain.id %}" 
                                           class="text-decoration-none">
                                            {{ domain.name }}
                                        </a>
                                    </div>
                                    {% if domain.zone_id %}
                                        <small class="text-muted">Zone ID: {{ domain.zone_id }}</small>
                                    {% endif %}
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                {% if domain.cloud_account.provider == 'aliyun' %}
                                    <span class="badge bg-primary me-2">阿里云</span>
                                {% elif domain.cloud_account.provider == 'tencent' %}
                                    <span class="badge bg-success me-2">腾讯云</span>
                                {% elif domain.cloud_account.provider == 'huawei' %}
                                    <span class="badge bg-warning me-2">华为云</span>
                                {% elif domain.cloud_account.provider == 'volcengine' %}
                                    <span class="badge bg-danger me-2">火山引擎</span>
                                {% endif %}
                                <span class="text-muted">{{ domain.cloud_account.name }}</span>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-dns text-info me-2"></i>
                                <span class="fw-semibold">{{ domain.dnsrecord_set.count }}</span>
                            </div>
                        </td>
                        <td>
                            {% if domain.last_sync %}
                                <small class="text-muted">
                                    <i class="bi bi-arrow-repeat me-1"></i>
                                    {{ domain.last_sync|date:"m-d H:i" }}
                                </small>
                            {% else %}
                                <small class="text-warning">
                                    <i class="bi bi-exclamation-triangle me-1"></i>
                                    未同步
                                </small>
                            {% endif %}
                        </td>
                        <td>
                            {% if domain.is_active %}
                                <span class="badge bg-success">
                                    <i class="bi bi-check-circle me-1"></i>启用
                                </span>
                            {% else %}
                                <span class="badge bg-secondary">
                                    <i class="bi bi-pause-circle me-1"></i>禁用
                                </span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="text-center">
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{% url 'domain_records' domain.id %}" 
                                       class="btn btn-outline-primary" 
                                       title="查看解析记录">
                                        <i class="bi bi-list-ul"></i>
                                    </a>
                                    <a href="{% url 'sync_domain_records' domain.id %}" 
                                       class="btn btn-outline-info" 
                                       title="同步记录"
                                       onclick="return confirm('确定要从云端同步DNS记录吗？')">
                                        <i class="bi bi-arrow-repeat"></i>
                                    </a>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button class="btn btn-outline-secondary dropdown-toggle" 
                                                data-bs-toggle="dropdown">
                                            <i class="bi bi-three-dots"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a class="dropdown-item" href="#">
                                                    <i class="bi bi-pencil me-2"></i>编辑域名
                                                </a>
                                            </li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li>
                                                <a class="dropdown-item text-danger" href="#"
                                                   onclick="return confirm('确定要删除此域名吗？这将同时删除所有DNS记录！')">
                                                    <i class="bi bi-trash me-2"></i>删除域名
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 分页 -->
    {% if domains.has_other_pages %}
    <div class="card-footer bg-white border-0">
        <nav aria-label="域名分页">
            <ul class="pagination pagination-sm justify-content-center mb-0">
                {% if domains.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ domains.previous_page_number }}">
                            <i class="bi bi-chevron-left"></i>
                        </a>
                    </li>
                {% endif %}
                
                {% for num in domains.paginator.page_range %}
                    {% if domains.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                    {% elif num > domains.number|add:'-3' and num < domains.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}
                
                {% if domains.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ domains.next_page_number }}">
                            <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
</div>
{% else %}
<div class="text-center py-5">
    <div class="mb-4">
        <i class="bi bi-globe-americas text-muted" style="font-size: 4rem;"></i>
    </div>
    <h4 class="text-muted mb-3">还没有域名</h4>
    <p class="text-muted mb-4">
        添加您的第一个域名，开始管理DNS解析记录
    </p>
    <div class="d-flex gap-2 justify-content-center">
        <a href="{% url 'create_domain' %}" class="btn btn-success btn-lg">
            <i class="bi bi-plus me-2"></i>添加域名
        </a>
        <a href="{% url 'cloud_accounts' %}" class="btn btn-outline-primary btn-lg">
            <i class="bi bi-cloud-check me-2"></i>管理云账号
        </a>
    </div>
</div>
{% endif %}

<style>
.domain-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.table tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}
</style>
{% endblock %}